<template>
    <div class="user-info">
        <div class="body row">
            <div class="img">
                <img :src="avatarImg" />
            </div>

            <div v-if="isLogin" class="info">
                <div class="name">{{ this.$store.state.userInfo.nickName }}</div>
                <div class="telephone">{{ this.$store.state.userInfo.email }}</div>
            </div>

            <div v-else class="info-none column">
                <div class="btn" @click="toLoginPage">点击登录</div>
            </div>

            <div class="actions row" @click="toSettingPage">
                <div class="icon">
                    <img :src="require('@/assets/icon/setting.png')" />
                </div>
                <div>设置</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            showLogin: false
        };
    },

    computed: {
        isLogin() {
            return this.$login.hasLoginState();
        },
        avatarImg() {
            return this.$store.state.userInfo.avatarImg;
        }
    },

    methods: {
        toSettingPage() {
            this.$router.push({
                path: "/profile/setting"
            });
        },
        toLoginPage() {
            let redirectPath = encodeURIComponent(this.$route.fullPath);
            this.$router.push({
                path: `/login/index?redirectPath=${redirectPath}`
            });
        }
    }
};
</script>


<style lang="less" scoped>
.user-info {
    padding: 30px 30px 20px 30px;
    background: #fff;
    .body {
        width: 100%;

        .img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #eee;
            margin-right: 30px;
            overflow: hidden;
        }

        .info {
            flex: 1 1 auto;
            padding: 20px 0 0 0;
            .name {
                font-size: 36px;
                font-weight: 600;
                margin-bottom: 15px;
            }
        }

        .info-none {
            flex: 1 1 auto;
            padding: 0 30px;
            justify-content: center;
            .btn {
                color: #888;
                font-size: 32px;
                font-weight: 600;
            }
        }

        .actions {
            align-items: center;
            .icon {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
        }
    }
}
</style>